(function(){

var wid=$('#svgbox').width(),//svg的宽
	hei=$('#svgbox').height(),
	self=this;//svg的高
	
var shuxianone=wid/420*135,//竖线的11:30间隔
	shuxiantwo=wid/420*225,//竖线的13:00间隔
	danxian=wid/420,//单个X间隔
	henxian=hei*0.7/6,//曲线横线的间隔
	orq=hei*0.7,//曲线图的高度
	orl=hei*0.3,//柱状图的高度
	orlline=hei*0.3/2,//柱状图的高度间隔
	linewid=wid/420/2;//柱状图的间隔
//模拟数组
var data=[{ys:2560.00,zs:5,ds:35},
		  {ys:2750.00,zs:12,ds:32},
		  {ys:3600.00,zs:10,ds:10},
		  {ys:2000.00,zs:60,ds:25},
		  {ys:2050.00,zs:20,ds:36},
		  {ys:2600.00,zs:30,ds:26},
		  {ys:2800.00,zs:10,ds:60},
		  {ys:3000.00,zs:80,ds:80},
		  {ys:3600.00,zs:100,ds:0},
		  {ys:3600.00,zs:100,ds:0},
		];
var lenghtss;

$.ajax({
	type:"get",
	url:urls,
	dataType:'json',
	async:true,
	success:function(datasd){
		data=datasd;
		lenghtss=datasd['tu'].length;
		init();
		console.log(lenghtss)
	}
});


setInterval(function(){
	$.ajax({
		type:"get",
		url:urls,
		dataType:'json',
		async:true,
		success:function(datasd){
			data=datasd;
			lenghtss=datasd['tu'].length;
			init();
		}
	});
	
},60000)
	
	
//返回可动态加载到svg中并绘制的svg对象
function makeSVG(tag, attrs) {
    var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var k in attrs)
        el.setAttribute(k, attrs[k]);
    return el;
}
function init(){
	dirdata();
//	redline();
	picdark();
	linedark();
	circle();
}
var dsvg=$('#svgbox').find('g').eq(0);
function bakc(){
	//曲线的网格
	
//	var shulineone=makeSVG('line', {x1: wid*0.5, x2: wid*0.5, y1:0, y2:orq, stroke: '#f8f8f8'});//12.00
//		dsvg.append(shulineone);
	var shulinetwo=makeSVG('line', {x1: wid*0.31, x2: wid*0.31, y1:0, y2:orq, stroke: '#f8f8f8'});//13.00
		dsvg.append(shulinetwo);	
	//横5根
	for(var i=0;i<6;i++){
		var henline=makeSVG('line', {x1: 0, x2: wid, y1:henxian*(i+1), y2:henxian*(i+1), stroke: '#f8f8f8'});//13.00
		dsvg.append(henline);
	}
	
	// text 06.00
	dsvg.find('text').eq(0).attr('y',hei*0.7+14);
//	// text 12.00
//	dsvg.find('text').eq(1).attr('x',wid*0.5-13);
//	dsvg.find('text').eq(1).attr('y',hei*0.7+14);
	// text 13.00
	dsvg.find('text').eq(2).attr('x',wid*0.31-13);
	dsvg.find('text').eq(2).attr('y',hei*0.7+14);
	// text 16.00
	dsvg.find('text').eq(3).attr('x',wid-70);
	dsvg.find('text').eq(3).attr('y',hei*0.7+14);
	
	
	//柱状图 横线
	var orlone=makeSVG('line', {x1: 0, x2: wid, y1:hei*0.7+orlline*1, y2:hei*0.7+orlline*1, stroke: '#f8f8f8'})//9.15
		dsvg.append(orlone);
	var orltwo=makeSVG('line', {x1: 0, x2: wid, y1:hei*0.7+orlline*2-1, y2:hei*0.7+orlline*2-1, stroke: '#f8f8f8'})//13.00
		dsvg.append(orltwo);
};
bakc()

var tu,fenxian,baifen,jiange;
function dirdata(){
	tu=data['tu'];
	fenxian=data['shi'];
	jiange=fenxian.hign*1000-fenxian.low*1000;
	baifen=hei*0.7/jiange;
//	dsvg.find('text').eq(4).find('tspan').html(fenxian.open);
	
	dsvg.find('text').eq(5).find('tspan').html(fenxian.hign);
	dsvg.find('text').eq(5).find('tspan').attr('y',hei*0.7-hei*0.7/jiange*(fenxian.hign*1000-fenxian.low*1000)+20);
	
	dsvg.find('text').eq(6).find('tspan').html(fenxian.low);
	dsvg.find('text').eq(6).find('tspan').attr('y',hei*0.7-hei*0.7/jiange*1-5);
	
	console.log(tu[0].ys+'/'+fenxian.low);
}
//绘制红线
function redline(){
	var stappp=hei*0.7-hei*0.7/jiange*(fenxian.open*1000-fenxian.low*1000);
	dsvg.find('line').eq(0).attr('x1',0);
	dsvg.find('line').eq(0).attr('x2',wid);
	dsvg.find('line').eq(0).attr('y1',stappp);
	dsvg.find('line').eq(0).attr('y2',stappp);
	
	//收盘价
	dsvg.find('text').eq(4).attr('y',stappp+14);
	
	// +%
//	dsvg.find('text').eq(5).attr('x',wid-80);
//	dsvg.find('text').eq(5).attr('y',stappp+14);
}
//曲线图
var osvg=$('#svgbox').find('g').eq(1),//位置
	osvgline=osvg.find('path').eq(1),//线
	osvgpic=osvg.find('path').eq(0),//图
	last;
function picdark(){	
	var start=hei*0.7/jiange*(tu[0].ys*1000-fenxian.low*1000),
		lineone="M 0,"+(hei*0.7-start);
		//console.log(start);
	for(var i=1;i<lenghtss;i++){
		if(i>0){
			var bod=(tu[i].ys*1000-fenxian.low*1000)*hei*0.7/jiange;
			lineone=lineone+"L"+(i+1)*wid/1320+","+(hei*0.7-bod);
		}
		
	}
		lineone=lineone+"L"+lenghtss*wid/1320+","+hei*0.7 +"L"+0+","+hei*0.7 +"Z";
		
	var linetwo="M 0,"+(hei*0.7-start);
	for(var i=0;i<lenghtss;i++){
		var bod=(tu[i].ys*1000-fenxian.low*1000)*hei*0.7/jiange;
			last=bod;
		linetwo=linetwo+"L"+(i+1)*wid/1320+","+(hei*0.7-bod);
	}
	osvgline.attr('d',linetwo);
	osvgpic.attr('d',lineone);
};


//柱状图
var linesvg=$('#svgbox').find('g').eq(2);//位置
function linedark(){
	linesvg.find('line').remove();
	for(var i=0;i<lenghtss;i++){
		var henline=makeSVG('line', {x1:i*wid/1320, x2: i*wid/1320, y1:hei, y2:hei-(hei*0.3/5000*tu[i].zs), stroke: '#d0402d','stroke-width':linewid});//
		linesvg.append(henline);
	}
//	for(var i=0;i<lenghtss;i++){
//		var henline=makeSVG('line', {x1:(i+1)*wid/800+linewid, x2: (i+1)*wid/420+linewid, y1:hei, y2:hei-(hei*0.3/200*data[i].ds), stroke: '#17b03e','stroke-width':linewid});//
//		linesvg.append(henline);
//	}	
};

function circle(){
	osvg.find('circle').remove();
	var circle= makeSVG('circle', {cx: (lenghtss)*wid/1320, cy: (hei*0.7-last), r:2, stroke: 'none', 'stroke-width': "none", fill: 'red'});
	osvg.append(circle);
}








//	console.log(hei*0.7-(data[lenghtss-1].ys*(hei*0.7/5000)));
})()//闭包
